<template>
	<view class="container d-flex flex-column">
		<view class="flex-fill form">
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">昵称</view>
					<view class="input flex-fill">
						<input type="text" placeholder="请填写昵称" placeholder-class="text-color-assist font-size-base"
							v-model="member.nickname ">
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">手机号码</view>
					<view class="input flex-fill">
						<input type="text" v-model="member.mobile" disabled>
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">性别</view>
					<view class="input flex-fill">
						<view class="radio-group">
							<view class="radio" :class="{'checked': member.sex == '1'}" style="margin-right: 10rpx;"
								@tap="changeSex(1) ">先生</view>
							<view class="radio" :class="{'checked': member.sex == '2'}" @tap="changeSex(2)">女士</view>
						</view>
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false" :arrow="!member.birthday1">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">生日</view>
					<view class="input flex-fill">
						<input type="text" @click="pickshow" placeholder="生日当天有惊喜" :value="member.birthday1" disabled>
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false" last>
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">注册时间</view>
					<view class="input flex-fill">
						<input type="text" v-model="member.create_time" disabled>
					</view>
				</view>
			</list-cell>
		</view>
		<view class="btn-box d-flex align-items-center just-content-center">
			<button type="primary" class="save-btn" @tap="save">保存</button>
		</view>
		<u-picker v-model="show" mode="time" @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'
	import {
		mapMutations
	} from 'vuex'
	export default {
		components: {
			listCell
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				show: false,
				member: {
					nickname: '',
					sex: '',
					birthday: '',
					birthday1: '',
					create_time: '',
					mobile: ''
				},
				userinfo: {},
				date: currentDate
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			console.log( this.$u.timeFormat(this.userinfo.birthday, 'yyyy-mm-dd'),9999);
			this.userinfo = JSON.parse(JSON.stringify(uni.getStorageSync('userInfo')))
			console.log(uni.getStorageSync('userInfo'));
			this.member.nickname = this.userinfo.thirdPartyUser[0].nickname || 'UTea_' + this.userinfo.mobile.slice(-4)
			this.member.sex = this.userinfo.sex || 0
			if(this.userinfo.birthday != 0){
				this.member.birthday1 = this.$u.timeFormat(this.userinfo.birthday*1000, 'yyyy-mm-dd')
			}else{
				this.member.birthday1 = ''
			}
			this.member.birthday = this.userinfo.birthday || ''
			this.member.create_time = this.userinfo.create_time || ''
			this.member.mobile = this.userinfo.mobile
		},
		methods: {
			...mapMutations(['SET_MEMBER']),
			confirm(params) {
				this.member.birthday1 = params.year + '-' + params.month + '-' + params.day
				this.member.birthday = params.timestamp
			},
			pickshow() {
				if (this.member.birthday1 != '') {
					return
				}
				this.show = true
			},
			changeSex(e){
				if(this.member.sex != 0){
					return
				}
				this.member.sex = e
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async getUserInfo() {
				let res = await this.apiPost('/user/user/info')
				console.log(res);
				if (res.data.code == 1) {
					uni.setStorageSync('userInfo', res.data.data)
					this.SET_MEMBER(res.data.data)
					uni.navigateBack()
				} else {
					uni.showToast({
						title: res.data.msg
					})
				}

			},
			async save() {
				if (this.member.nickname == '') {
					this.msg('请输入姓名')
					return
				}
				if (this.member.birthday == '') {
					this.msg('请输入生日')
					return
				}
				if (this.member.sex == '') {
					this.msg('请选择性别')
					return
				}
				let data = {
					birthday: this.member.birthday,
					sex: this.member.sex,
					nickname: this.member.nickname,
				}
				let res = await this.apiPost('/user/user/edit', data)
				console.log(res);
				if (res.data.code == 1) {
					this.getUserInfo()
					this.msg('修改成功')
				} else {
					this.msg(res.data.msg)
				}
				// const member = Object.assign(this.$store.state.member, this.member)
				// this.$store.commit('SET_MEMBER', member)
				// uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.container {
		padding: 20rpx 30rpx;
	}

	.form {
		border-radius: 8rpx;
	}

	.form-input {
		.label {
			width: 160rpx;
			font-size: $font-size-base;
			color: $text-color-base;
		}

		.input {}

		.radio-group {
			display: flex;
			justify-content: flex-start;

			.radio {
				padding: 10rpx 30rpx;
				border-radius: 6rpx;
				border: 2rpx solid $text-color-assist;
				color: $text-color-assist;
				font-size: $font-size-base;

				&.checked {
					background-color: $color-primary;
					color: $text-color-white;
					border: 2rpx solid $color-primary;
				}
			}
		}
	}

	.btn-box {
		height: calc((100vh - 40rpx) / 2);
	}

	.save-btn {
		width: 90%;
		border-radius: 50rem !important;
		font-size: $font-size-lg;
	}
</style>